import styles from "./MyPage.module.css";
import {
  Setting,
  ArrowRight,
  UserAdd,
  Receipt,
  HeartFill,
  Footprint,
  Refund,
  Ticket,
  Mail,
  Edit,
  People,
  Service,
  Store,
  Transit,
  Gift,
  Location,
} from "@nutui/icons-react";
import { Avatar } from "@nutui/nutui-react";
import { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { http } from "../../utils";
import { Grid, ConfigProvider } from "@nutui/nutui-react";
import { useNavigate } from "react-router-dom";
const MyPage = () => {
  const createRef = useRef(false);
  const navigate = useNavigate();
  const [userMessage, setUserMessage] = useState({});
  useEffect(() => {
    if (!createRef.current) {
      createRef.current = true;
      get_userMessage();
      console.log(Date.now());
    }
  }, []);

  const get_userMessage = async () => {
    let res = await http.get("/main/userMessage");
    if (res.code == 200) {
      setUserMessage({ ...res.data });
    }
  };
  const darkTheme = {
    nutuiGridBorderColor: "white",
  };
  return (
    <ConfigProvider theme={darkTheme}>
      <div className={styles.myPage_out_box}>
        <div className={styles.myPage_top_box}>
          <div className={styles.myPage_config_box}>
            <Setting
              color="white"
              width="0.2rem"
              height="0.2rem"
              onClick={() => navigate("/outlet/configMessage")}
            />
          </div>
          <div className={styles.myPage_message_box}>
            <div
              className={styles.myPage_img_box}
              onClick={() => navigate("/outlet/selfMessage")}
            >
              <img
                className={styles.self_img_head}
                src={`http://localhost:3000${userMessage.head}`}
                alt=""
              />
            </div>
            <div
              style={{
                marginLeft: "0.2rem",
                fontSize: "0.2rem",
                color: "white",
              }}
              onClick={() => navigate("/outlet/selfMessage")}
            >
              {userMessage.user}
              <ArrowRight />
            </div>
          </div>
        </div>
        <div className={styles.myPage_fun_box}>
          <div
            className={styles.myPage_fun_div}
            style={{ marginTop: "-0.2rem" }}
          >
            <Grid columns={4}>
              <Grid.Item text={<span>我的钱包</span>}>
                <Refund />
              </Grid.Item>
              <Grid.Item text={<span>红包</span>}>
                <Mail />
              </Grid.Item>
              <Grid.Item text={<span>代金券</span>}>
                <Ticket />
              </Grid.Item>
              <Grid.Item text={<span>支付账单</span>}>
                <Receipt />
              </Grid.Item>
            </Grid>
          </div>
          <div
            className={styles.myPage_fun_div}
            style={{ marginTop: "0.15rem" }}
          >
            <h2 style={{ marginLeft: "0.2rem", marginTop: "0.1rem" }}>
              功能服务
            </h2>
            <Grid columns={4}>
              <Grid.Item
                onClick={() => {
                  navigate("/outlet/showCollect");
                }}
                text={<span style={{ fontSize: "0.16rem" }}>我的收藏</span>}
              >
                <HeartFill className="nut-icon-am-breathe nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>我的足迹</span>}
              >
                <Footprint className="nut-icon-am-breathe nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>我的评价</span>}
                onClick={() => navigate("/outlet/com")}
              >
                <Edit className="nut-icon-am-breathe nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>收货地址</span>}
                onClick={() =>navigate("/outlet/ship")} 
              >
                <Location className="nut-icon-am-breathe nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>发票助手</span>}
              >
                <People className="nut-icon-am-breathe nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={
                  <span
                    style={{ fontSize: "0.16rem" }}
                    onClick={() => {
                      navigate("/outlet/AiTask");
                    }}
                  >
                    帮助与客服
                  </span>
                }
              >
                <Service className="nut-icon-am-blink nut-icon-am-infinite" />
              </Grid.Item>
            </Grid>
          </div>
          <div
            className={styles.myPage_fun_div}
            style={{ marginTop: "0.15rem" }}
          >
            <h2 style={{ marginLeft: "0.2rem", marginTop: "0.1rem" }}>
              更多推荐
            </h2>
            <Grid columns={4}>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>邀请有奖</span>}
              >
                <Gift className="nut-icon-am-bounce nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>商家开店</span>}
              >
                <Store />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>骑手招募</span>}
              >
                <Transit className="nut-icon-am-shake nut-icon-am-infinite" />
              </Grid.Item>
              <Grid.Item
                text={<span style={{ fontSize: "0.16rem" }}>同城跑腿</span>}
              >
                <UserAdd />
              </Grid.Item>
            </Grid>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};
export default MyPage;
